<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上选课</title>
    <link rel="shortcut icon" href="../img/favicon.png">
    <script src="../js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/default.css" />
    <link rel="stylesheet" type="text/css" href="../css/component.css" />
    <script src="../js/modernizr.custom.js"></script>
    <style>
        embed {
            width: 40%;
            margin-top:70px ;
            /* border: 1px solid black; */
        }
        h1{
           float: none;
        }
    </style>

    <script>

        $(function () {

            $("#one").hover(
                function () {
                    $("#one embed:eq(0)").toggle();
                    $("#one embed:eq(1)").toggle();
                },
                function () {
                    $("#one embed:eq(0)").toggle();
                    $("#one embed:eq(1)").toggle();
                }

            )

            $("#two").hover(
                function () {
                    $("#two embed:eq(0)").toggle();
                    $("#two embed:eq(1)").toggle();
                },
                function () {
                    $("#two embed:eq(0)").toggle();
                    $("#two embed:eq(1)").toggle();
                }

            )
            $("#three").hover(
                function () {
                    $("#three embed:eq(0)").toggle();
                    $("#three embed:eq(1)").toggle();
                },
                function () {
                    $("#three embed:eq(0)").toggle();
                    $("#three embed:eq(1)").toggle();
                }

            )
            $("#four").hover(
                function () {
                    $("#four embed:eq(0)").toggle();
                    $("#four embed:eq(1)").toggle();
                },
                function () {
                    $("#four embed:eq(0)").toggle();
                    $("#four embed:eq(1)").toggle();
                }

            )
            $("#five").hover(
                function () {
                    $("#five embed:eq(0)").toggle();
                    $("#five embed:eq(1)").toggle();
                },
                function () {
                    $("#five embed:eq(0)").toggle();
                    $("#five embed:eq(1)").toggle();
                }

                
            )
            $("#six").hover(
                function () {
                    $("#six embed:eq(0)").toggle();
                    $("#six embed:eq(1)").toggle();
                },
                function () {
                    $("#six embed:eq(0)").toggle();
                    $("#six embed:eq(1)").toggle();
                }

            )

        })
    </script>
</head>

<body>
    <div class="container">
        <header class="clearfix">
            <h1>所有课程</h1>
        </header>
        <div class="main">
            <ul class="cbp-ig-grid">
                <li>
                    <a href="https://www.java.com/zh-CN/" id="one" target="_blank">
                        <embed  src="../img/svg/java.svg" type="">
                        <embed  src="../img/svg/java1.svg" style="display: none;" type="">
                        <!-- <span class="cbp-ig-icon cbp-ig-icon-shoe"></span> -->
                        <h3 class="cbp-ig-title">Java高级编程</h3>
                        <span class="cbp-ig-category">choice</span>
                    </a>
                </li>

                <li>
                    <a href="https://www.javascript.com/" id="three" target="_blank">
                        <embed src="../img/svg/js.svg" type="" style="display: none;">
                            <embed src="../img/svg/js1.svg"   type="">
                        <!-- <span class="cbp-ig-icon cbp-ig-icon-milk"></span> -->
                        <h3 class="cbp-ig-title">JavaScript</h3>
                        <span class="cbp-ig-category">choice</span>
                    </a>
                </li>
                <li>
                    <a href="https://vuejs.org/" id="two" target="_blank">
                        <embed src="../img/svg/Vue.svg" type="">
                        <embed src="../img/svg/Vue2.svg" style="display: none;" type="">
                        <!-- <span class="cbp-ig-icon cbp-ig-icon-ribbon"></span> -->
                        <h3 class="cbp-ig-title">Vue</h3>
                        <span class="cbp-ig-category">choice</span>
                    </a>
                </li>
                <li>
                    <a href="https://www.mysql.com/" id="four" target="_blank">
                        <embed src="../img/svg/mysql 云数据库MySQL版.svg" type="" style="display: none;" type="">
                            <embed src="../img/svg/mysql 云数据库MySQL版 (1).svg"  >
                        <!-- <span class="cbp-ig-icon cbp-ig-icon-whippy"></span> -->
                        <h3 class="cbp-ig-title">MySQL</h3>
                        <span class="cbp-ig-category">choice</span>
                    </a>
                </li>

                <li>
                    <a href="https://jquery.com/" id="six" target="_blank">
                        <embed src="../img/svg/Jquery.svg" type="">
                            <embed src="../img/svg/Jquery1.svg" type=""  style="display: none;">
                        <!-- <span class="cbp-ig-icon cbp-ig-icon-doumbek"></span> -->
                        <h3 class="cbp-ig-title">jQuery</h3>
                        <span class="cbp-ig-category">choice</span>
                    </a>
                </li>
                <li>
                    <a href="https://github.com/" target="_blank" id="five">
                        <embed src="../img/svg/github-fill.svg" type="" style="display: none;" >
                            <embed src="../img/svg/github-fill1.svg" type="" >
                        <!-- <span class="cbp-ig-icon cbp-ig-icon-spectacles"></span> -->
                        <h3 class="cbp-ig-title">github</h3>
                        <span class="cbp-ig-category">choice</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>